<template>
  <div>
    <el-dialog v-bind="$attrs" :visible.sync="showDialog" v-on="$listeners" @open="onOpen" @close="onClose" title="添加学生">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="students" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="所在年级" prop="grade">
              <el-select v-model="students.grade" placeholder="请选择所在年级" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in grades" :key="index" :label="item.gradeName"
                  :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属分院" prop="institute">
              <el-select v-model="students.institute" placeholder="请选择所属分院" clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in institutes" :key="index" :label="item.instituteName"
                  :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在专业" prop="specialty">
              <el-select v-model="students.specialty" placeholder="请选择所在专业" clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in specialties" :key="index" :label="item.specialtyName"
                  :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在班级" prop="studentClazz">
              <el-select v-model="students.studentClazz" placeholder="请选择所在班级" clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in clazzes" :key="index" :label="item.clazzName"
                  :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学号" prop="studentId">
              <el-input v-model="students.studentId" placeholder="请输入学号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="studentName">
              <el-input v-model="students.studentName" placeholder="请输入姓名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="students.sex" size="medium">
                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生电话" prop="studentPhone">
              <el-input v-model="students.studentPhone" placeholder="请输入学生电话" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生QQ" prop="studentQq">
              <el-input v-model="students.studentQq" placeholder="请输入学生QQ" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { saveStudent } from '../../api/students'

export default {
  name: 'StudentsAdd',
  
  components: {},
  // 接受父组件传递的值
  props:{
    addOrUpdateVisible:{
        type: Boolean,
        default: false
    },
    grades:{
        type: Array,
        default: []
    },
    institutes:{
        type: Array,
        default: []
    },
    specialties:{
        type: Array,
        default: []
    },
    clazzes:{
        type: Array,
        default: []
    }
  },
  data() {
    return {
      students: {
        grade: undefined,
        institute: undefined,
        specialty: undefined,
        studentClazz: undefined,
        studentId: undefined,
        studentName: undefined,
        sex: 0,
        studentPhone: undefined,
        studentQq: undefined,
      },
      // 控制弹出框显示隐藏
      showDialog:false,
      rules: {
        grade: [{
          required: true,
          message: '请选择所在年级',
          trigger: 'change'
        }],
        institute: [{
          required: true,
          message: '请选择所属分院',
          trigger: 'change'
        }],
        specialty: [{
          required: true,
          message: '请选择所在专业',
          trigger: 'change'
        }],
        studentClazz: [{
          required: true,
          message: '请选择所在班级',
          trigger: 'change'
        }],
        studentId: [{
          required: true,
          message: '请输入学号',
          trigger: 'blur'
        }],
        studentName: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        sex: [{
          required: true,
          message: '性别不能为空',
          trigger: 'change'
        }],
        studentPhone: [{
          required: false,
          message: '请输入学生电话',
          trigger: 'blur'
        }],
        studentQq: [{
          required: false,
          message: '请输入学生QQ',
          trigger: 'blur'
        }],
      },
      sexOptions: [{
        "label": "男",
        "value": 0
      }, {
        "label": "女",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal,newVal){
      this.showDialog = this.addOrUpdateVisible
    },
  },
  created() {},
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      this.$refs['elForm'].resetFields()
      this.$emit('changeShow', 'false')
    },
    close() {
      this.$emit('changeShow', 'false')
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) {
          return
          }
        console.log(this.students)
        this.addStudent()
      })
    },
    //添加学生
    async addStudent() {
      const{ data: res } = await saveStudent(this.students)
      if(res.code == 20000) {
        this.$notify.success({
          title: '操作成功',
          message: '学生添加成功',
        })
        //关闭
        this.$emit('changeShow', 'false')
        this.students = {}
        //this.$parent.getStudentList();
        this.$emit('getStudentList');
        this.$emit('getInstitute');
        this.$emit('getSpecialty');
        this.$emit('getClazz');
        this.$emit('getGrade');
      }else{
        return this.$message.error('学生添加失败:' + res.message)
      }
    }
  }
}

</script>
<style>
</style>
